<!-- 智能投顾 - 详情 -->
<template>
  <div class="ico">
    <x-header :left-options="{showBack: false}">{{ detail.name }}</x-header>
    <img src="../../../assets/navBar.png" alt="" width="10" class="navBtnico" @click="backBtnico">
    <div class="top-wrap">
      <img src="../../../../static/images/fp/f_bg.png" alt="" style="height: 160px;width: 100%;">
      <div class="icobanner">
        <div class="left">
          <div class="" style="font-size: 17px;">{{ detail.titleRate }}</div>
          <div class="" style="font-size: 25px;">{{ detail.rate }}</div>
        </div>
      </div>
      <div class="bannerSty">
        <span v-for="(label, index) in detail.content">{{ label }}</span>
      </div>
    </div>
    <!-- <v-chart :data="chartData" prevent-default>
        <v-scale x :tick-count="3" />
        <v-tooltip :show-item-marker="false" show-x-value />
        <v-line />
      </v-chart> -->
    <div style="height: 12px;"></div>
    <group>
      <cell is-link :arrow-direction="show1 ? 'up' : 'down'" @click.native="show1 = !show1">
        <span slot="title" style="font-size: 14px;">基金概况</span>
        <i slot="icon" class="tv-icon"></i>
      </cell>
      <template v-if="show1">
        <div class="showbox show1">
          <p style="font-size: 14px;">在ICO火热的当下，马六甲比特币基金公司推出了ICO基金，为我们的客户赢取高风险市场的最大收益。我们提供专业的技术团队，专业的操盘人员，对市场现有ICO产品进行筛选考察，最后选定部分ICO产品进行早鸟轮投资，以做到收益最大化。本团队参投项目ETH历史收益超过30倍。</p>
           <p style="font-size: 14px;">赎回说明：每月15日前申购的订单，将于次年同月的15日赎回；每月15日后申购的订单，将于次年下个月的15日赎回</p>
        </div>
      </template>
      <cell is-link :arrow-direction="show2 ? 'up' : 'down'" @click.native="show2 = !show2">
        <span slot="title" style="font-size: 14px;">产品参数</span>
        <i slot="icon" class="book-icon"></i>
      </cell>
      <!-- <template v-if="show2">
          <div class="showbox show2 show2-ai">
            <div class="item">
              <div class="title">
                <span>起投额度</span>
              </div>
              <div class="content">
                1000元起投
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>赎回</span>
              </div>
              <div class="content">
                产品到期后T+0可赎回。工作日17:30之前，提现当天到账，17:30 后，下一个工作日。
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>收益类型</span>
              </div>
              <div class="content">
                固定收益+浮动收益
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>管理服务费用说明</span>
              </div>
              <div class="content">
                <div>1个月本金的<span style="color: #ff1010">2%</span></div>
                <div>1-6个月赎回：浮动收益的<span style="color: #ff1010">50%</span>；</div>
                <div>6-9个月赎回：浮动收益的<span style="color: #ff1010">40%</span>；</div>
                <div>9-24个月赎回：浮动收益的<span style="color: #ff1010">30%</span>；</div>
                <div>24个月赎回：浮动收益的<span style="color: #ff1010">20%</span>；</div>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>收益</span>
              </div>
              <div class="content">
                <div>1个月内赎回：只可赎回本金部分并支付<span style="color: #ff1010">2%</span>的管理费</div>
                <div>1-6个月赎回：<span style="color: #ff1010">4%</span>+浮动收益；</div>
                <div>6-9个月赎回：<span style="color: #ff1010">6%</span>+浮动收益；</div>
                <div>9-24个月赎回：<span style="color: #ff1010">10%</span>+浮动收益；</div>
                <div>24个月赎回：<span style="color: #ff1010">15%</span>+浮动收益；</div>
              </div>
            </div>
          </div>
        </template> -->
      <template v-if="show2">
        <ul style="font-size: 14px;">
          <li class="otcList">
            <div>
              <span>封闭期</span>
              <span class="fa r15">{{detail.week.replace('天', '')}}天</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>起投条件</span>
              <span class="fa r15">{{detail.join}}</span>
            </div>
          </li>
          <li class="otcList">
            <div>
              <span>预期年华收益率</span>
              <span class="fa r15">{{detail.rate}}</span>
            </div>
          </li>
        </ul>
      </template>
      <cell is-link :arrow-direction="show3 ? 'up' : 'down'" @click.native="show3 = !show3">
        <span slot="title" style="font-size: 14px;">风控保障</span>
        <i slot="icon" class="unbrella-icon"></i>
      </cell>
      <template v-if="show3">
        <div class="showbox show3 show3-ai" style="font-size: 14px;">
          <div class="item">
            <div class="title">
              <span>甄选ICO项目</span>
            </div>
            <div class="content">
              从市场、团队、技术、盈利模式、资金监管、融资规模多方面考察ICO基金投资项目
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>专业交易员操作</span>
            </div>
            <div class="content">
              每一个项目递交到ICO基金项目团队之前必须经过合作机构的审查筛选
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>项目经理收集项目资料</span>
            </div>
            <div class="content">
              项目经理会全面收集项目资料，尽职调查。形成调研报告供风控部门审核参考
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>风控部全面审查</span>
            </div>
            <div class="content">
              我风控部门会对团队人员进行信用调查，时地访谈，账证核实和发担保调查，出具风控报告
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>风控部综合评判</span>
            </div>
            <div class="content">
              ICO基金项目团队会定期汇报项目团队管理数据，以及预警突发状况
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>合规合法严格监管</span>
            </div>
            <div class="content">
              在投资项目前，ICO基金项目团队会进行双层审核确保信息的准确无误
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>投前再次审核确认</span>
            </div>
            <div class="content">
              ICO项目团队全程监督投资项目的合规性和合法性，充分保障投资者的利益
            </div>
          </div>
          <div class="item">
            <div class="title">
              <span>投后管理</span>
            </div>
            <div class="content">
              风投部门采用封闭投票的方式进行综合评判，风控团队之间的意见互不受干扰
            </div>
          </div>
        </div>
      </template>
    </group>
    <div class="bot-btn-wrap"></div>
    <div class="investment" @click="buy()">立即投资</div>
  </div>
</template>

<script>
  import { XHeader, VChart, VLine, VTooltip, VScale, Cell, Group } from 'vux'
  import moment from 'dayjs'
  import { aiRate, detail } from '../../../service/product'

  export default {
    components: {
      XHeader,
      VChart,
      VLine,
      VTooltip,
      VScale,
      Cell,
      Group
    },
    data() {
      return {
        show1: true,
        show2: true,
        show3: true,
        chartData: [],
        detail: {},
        pid: "",
        aiDetail: {},
      }
    },
    async created() {
      await this.getDetail(this.$route.query.pid)
      await this.getAiRate()
    },
    mounted() {
      this.aiDetail = this.$store.getters.getData
      this.pid = this.$route.query.pid;
    },
    methods: {
      backBtnico() {
        history.back();
      },
      buy() {
        this.$router.push({ path: '/pay', query: { pid: this.pid, type: 'ico' } })
      },
      async getDetail(pid) {
        const res = await detail(pid)
        if (res.status === 200) {
          this.detail = res.body
        }
      },
      async getAiRate() {
        const res = await aiRate()
        if (res.status === 200) {
          for (let obj of res.rate) {
            this.chartData.push({
              date: moment(obj.key.replace('1700', '')).format('YYYY-MM-DD'),
              value: obj.price
            })
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/styles/fp-detail";
  .ico .investment {
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    color: #fff;
    width: 100%;
    text-align: center;
    /* border-radius: 25px; */
    width: 100%;
    position: fixed;
    bottom: 0px;
  }

  .ico .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #f76c25;
  }

  .icoTop {
    position: absolute;
    top: 0px;
  }

  .ico .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .ico .otcList {
    border-bottom: 1px solid #f6f6f6;
    height: 40px;
    line-height: 40px;
    padding: 0px 15px;
    color: #999;
    position: relative;
  }

  .ico .otcList:nth-child(2n) {
    background: #f6f6f6;
  }

  .ico .fr {
    position: relative;
  }

  .ico .fa {
    position: absolute;
  }

  .ico .mgt {
    margin-left: 10px;
  }

  .ico .c4 {
    color: #444;
  }

  .ico .c7 {
    color: #777;
  }

  .ico .r15 {
    right: 15px;
    color: #fea620;
  }

  .ico .bannerSty {
    text-align: center;
    margin-top: 20px;
  }

  .ico .bannerSty span {
    color: #fff;
    border-radius: 15px;
    border: 1px solid #fff;
    padding: 0px 8px;
    margin-right: 5px;
  }

  .ico .icobanner {
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -150px;
  }
  .navBtnico {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>